<template>
	<tm-fullView>
		<template  v-slot:default="{ info }">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : ''">
				<tm-menubars title="体验主题切换" color="primary"  :showback="true"></tm-menubars>
				
				<view class="ma-32  ">
					<view  class=" round-8 mb-24 fulled py-n16" 
						:class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : 'white'">
						<view class="flex-center flex-col pa-32">
							
							<view class="text-size-lg text-weight-b">更换主题</view>
							<view class="text-size-n py-12">当前:{{defaultTheme[0]}},更多主题请查阅官方文档</view>
							<view class="flex">
								<tm-pickers @confirm="change" :default-value="defaultTheme" :list="themeList" title="请选择主题" btn-color="primary">
									<tm-tags color="primary" size="g" model="text">选择内置主题</tm-tags>
								</tm-pickers>
								<view class="flex-shrink"><tm-tags @click="clearTheme" color="primary" size="g" model="text">恢复默认布局</tm-tags></view>
							</view>
						</view>
					</view>
					
					<view  class=" round-8 mb-24 fulled  py-n16"
						:class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : 'white'">
						<view class="flex-center flex-col pa-32">
							
							<view class="text-size-lg text-weight-b">暗黑主题的切换</view>
							<view class="text-size-n py-12">当前:{{$tm.vx.state().tmVuetify.black?'暗黑模式':'亮色模式'}}</view>
							<view class="flex">
								<tm-tags  @click="$tm.theme.setBlack(true)" color="primary" size="g" model="text">切换暗黑</tm-tags>
								<view class="flex-shrink"><tm-tags @click="$tm.theme.setBlack(false)" color="primary" size="g" model="text">切换亮色</tm-tags></view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
				
		</template>
	</tm-fullView>
</template>

<script>
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmTags from "@/tm-vuetify/components/tm-tags/tm-tags.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmPickers from "@/tm-vuetify/components/tm-pickers/tm-pickers.vue"

	export default {
		components:{tmSheet,tmFullView,tmMenubars,tmTags,tmPickers},
		data() {
			return {
				defaultTheme:[(this.$tm.vx.state().tmVuetify.color||'primary')],
				themeList:['primary','pink','red','green','blue','orange','brown']
			};
		},
		methods: {
			change(e) {
				this.defaultTheme = [e[0].data]
				this.$tm.theme.setTheme(e[0].data)
			},
			clearTheme(){
				this.$tm.theme.clear();
				this.defaultTheme = ['primary']
			}
		},
	}
</script>

<style lang="scss">

</style>
